在此之前已经单独介绍了 npm 包管理工具相关知识,
当我们想将封装的代码分享给其他人使用时,通常就需要开发一个 npm 包。
本章将简单介绍如何运用前面所学知识开发一个 npm 包。
当下通常的 npm 包源码结构如下,src
目录存放源码,同时使用 ts
进行开发。
sh
├── package.json
└── src
└── index.ts
比如这里的 index.ts
源码如下,我、我们导出两个通用方法。
``ts
export function hello(name: string) {
return
Hello ${name}!`
}
export function sum(a: number, b: number) { return a + b } ```
实际用户运行的肯定是 js 代码,所以这里我们需要将 ts 代码编译成 js 代码,这里我们使用 tsup
进行构建。
安装 2 个依赖 tsup
和 typescript
。
sh
npm i tsup typescript -D
调用 tsup 直接进行构建,命令如下。
sh
npx tsup src/index.ts --target es6 --format esm,cjs --dts
可以看见产物有 3 个 包含cjs(.js),esm(.mjs)
2 种格式,其中 d.ts
是 TS 类型定义文件。
添加 --watch
参数可以,实现监听文件变化,自动构建。
sh
npx tsup src/index.ts --target es6 --format esm,cjs --dts --watch
将上述的脚本可以添加到 package.json
中,方便调用。
json
{
"scripts": {
"build": "tsup src/index.ts --target es6 --format esm,cjs --dts",
"dev": "tsup src/index.ts --target es6 --format esm,cjs --dts --watch"
}
}
将 name
,version
,description
,author
,等信息修改为自己需要的。
设置 main
和 exports
内容如下。
json
{
"main": "dist/index.js",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"types": "./dist/index.d.ts"
}
}
}
可以在其他项目中直接使用绝对路径安装。
sh
npm install /Users/sugar/pkg/path
下面是示例,
安装完后可以看到 package.json
中出现了这个包和其相对路劲。
测试代码如下,
```js // index.js const { sum, hello} = require('npm-pkg')
console.log(sum(1, 2)) ```
```js // index.mjs import { hello } from 'npm-pkg'
console.log(hello('world')) ```
可以看到两种模块系统下均能正常工作我们的包。
同时由于我们有类型定义文件 index.d.ts
我们在开发的时候是会有类型提示的。
前往 npm 官网注册即可。
这里使用前面推荐安装的 yrm
工具快速切换。
sh
yrm use npm
sh
npm login
sh
npm publish
大功告成,我们的包已经发布到 npm 上了。
如果通过其它镜像源找不到我们的包,我们可以手动同步一下。
以淘宝源为例
① 浏览器访问同步链接
https://npmmirror.com/sync/express
sync
后面跟上要同步的包名即可。
② 使用 CLI
```sh
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm sync express ```
本文从 0-1 介绍了如何利用 TS 开发一个 npm 包,并发布到 npm 上。
详细介绍了:
tsup
工具的使用方式:支持多种格式产物,支持监听文件变化自动构建;